<template>
  <div class="input-container">
  <div class="input-card">
      <div class="filter-row">
        <d-select v-model="selectedCategories" :multiple="true" :options="categoryOptions" placeholder="选择方向（可选择）"></d-select>
        <d-input v-model="customCategories" placeholder="自定义方向（逗号分隔）" />
        <d-select v-model="selectedLevels" :multiple="true" :options="levelOptions" placeholder="选择难度"></d-select>
        <d-input-number v-model="questionCount" :min="1" :max="50" placeholder="题量" />
      </div>
      <div class="input-row">
        <d-input v-model="inputValue" :maxlength="2000" :placeholder="$t('challenge.hint')" @keyup.enter="onSubmit(inputValue)" />
        <d-button variant="solid" @click="onSubmit(inputValue)">发送</d-button>
      </div>
      <div class="control-row">
        <div class="spacer"></div>
        <d-button size="sm" variant="solid" @click="onStart" :disabled="challengeStore.active">{{ $t('challenge.start') }}</d-button>
        <d-button size="sm" variant="outline" @click="onNext" :disabled="!challengeStore.active || challengeStore.awaitingAnswer">{{ $t('challenge.next') }}</d-button>
        <d-button size="sm" variant="solid" @click="onStop" :disabled="!challengeStore.active">{{ $t('challenge.stop') }}</d-button>
      </div>
      <div class="input-meta">
        <span class="maxlength">{{ inputValue.length }}/2000</span>
        <span class="hint">Enter 提交</span>
      </div>
    </div>
    <div class="statement-box">
      <span>{{ $t('input.disclaimer') }}</span>
      <span class="separator" />
      <span class="link-span">{{ $t('input.privacyStatement') }}</span>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useChatMessageStore, useChallengeStore } from '@/store';
import { QUESTION_CATEGORIES } from '@/mock-data/challenge-questions';
import { ref, watchEffect } from 'vue';

const chatMessageStore = useChatMessageStore();
const challengeStore = useChallengeStore();

const inputValue = ref('');
const selectedCategories = ref<string[]>([]);
const selectedLevels = ref<string[]>([]);
const questionCount = ref<number>(10);
const customCategories = ref<string>('');

const categoryOptions = QUESTION_CATEGORIES.map(c => ({ label: c, value: c }));
const levelOptions = [
  { label: '简单', value: 'easy' },
  { label: '中等', value: 'medium' },
  { label: '困难', value: 'hard' },
];

chatMessageStore.$onAction(({ name }) => { if (name === 'ask') { inputValue.value = ''; } });

const onSubmit = (val: string) => { if (!val) return; if (challengeStore.active && challengeStore.awaitingAnswer) { challengeStore.submitAnswer(val); } else { chatMessageStore.ask(val); } };

const onStart = () => { challengeStore.start(); };
const onNext = () => { challengeStore.next(); };
const onStop = () => { challengeStore.stop(); };

// 同步筛选到 store
watchEffect(() => {
  const customs = customCategories.value
    .split(/[,\s]+/)
    .map(s => s.trim())
    .filter(s => s.length > 0);
  // @ts-ignore
  challengeStore.setCategories && challengeStore.setCategories([...selectedCategories.value, ...customs]);
  // @ts-ignore
  challengeStore.setLevels && challengeStore.setLevels(selectedLevels.value);
  // @ts-ignore
  challengeStore.setQuestionCount && challengeStore.setQuestionCount(Number(questionCount.value) || undefined);
});
</script>

<style scoped lang="scss">
@import "devui-theme/styles-var/devui-var.scss";

.input-container {
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 12px 12px 12px;
  .input-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px;
    border-radius: 12px;
    background-color: $devui-base-bg;
    box-shadow: 0px 1px 8px 0px rgba(25, 25, 25, 0.06);
  }
  .filter-row { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 8px; }
  .input-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
  .control-row { display: grid; grid-template-columns: 1fr auto auto auto; gap: 8px; align-items: center; }
  .spacer { height: 1px; }
  .input-meta { display: flex; justify-content: space-between; align-items: center; }
  .maxlength { font-size: $devui-font-size-sm; color: $devui-aide-text; }
  .hint { font-size: $devui-font-size-sm; color: $devui-aide-text; }

  .statement-box {
    font-size: 12px;
    margin-top: 8px;
    color: $devui-aide-text;
    text-align: center;

    .separator {
      height: 12px;
      margin: 0 4px;
      border: 0.6px solid $devui-disabled-text;
    }

    .link-span {
      cursor: pointer;
      text-decoration: underline;
    }
  }
}

</style>
